// TransferBox.vue
<template>
    <div class="transfer-box">
        <!-- 组件内容 -->
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
    name: 'TransferBox', // 组件名称
    data() {
    return {
    leftOptions: [],
    rightOptions: [],
    leftSelected: [],
    rightSelected: []
};
},
    created() {
    this.fetchLeftOptions();
},
    methods: {
    async fetchLeftOptions() {
    try {
    const response = await axios.get('/user/user/lists?type=1');
    this.leftOptions = response.data;
} catch (error) {
    console.error('加载数据失败:', error);
}
},
    moveToRight() {
    this.rightOptions = this.rightOptions.concat(this.leftSelected);
    this.leftOptions = this.leftOptions.filter(item => !this.leftSelected.includes(item));
    this.leftSelected = [];
},
    moveToLeft() {
    this.leftOptions = this.leftOptions.concat(this.rightSelected);
    this.rightOptions = this.rightOptions.filter(item => !this.rightSelected.includes(item));
    this.rightSelected = [];
}
}
};
</script>

<style>
    .transfer-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 400px;
}

    .box {
    width: 150px;
}

    select {
    width: 100%;
    height: 150px;
}

    .buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    button {
    margin: 5px;
}
</style>